<template>
  <div class="box2">
    <div class="money">
      <div
        style="width: 240px; height: 200px; display: inline-block; float: left"
      >
        <img src="@/assets/images/组 2586.png" />
      </div>
      <el-button
        plain
        size="mini"
        style="float: right; margin-right: 20px; margin-top: 20px"
        >提现设置</el-button
      >
      <div style="margin-left: 40px; margin-top: 26px; float: left">
        <b><span style="font-size: 23px">个人账号余额</span></b>
        <br /><br />
        <span style="font-size: 27px; color: #5cd5c8">3,150</span
        ><span style="color: #5cd5c8">元</span> <br /><br />
        <el-button @click="dialogFormVisible = false" type="primary" size="mini"
          >提现</el-button
        >
      </div>
    </div>
    <div class="notes1">
      <!-- 头部 -->

      <div class="menu1">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item id="el-menu" index="1">消费记录</el-menu-item>
          <el-menu-item id="el-menu" index="2">充值记录</el-menu-item>
        </el-menu>
        <div class="line"></div>
      </div>
      <!-- +++++++++++++++++++++++++++++++++++表格+++++++++++++++++++++++++++++++++++++++++++++++++++= -->
      <div class="table">
        <el-table :data="tableData" class="tableBox2" style="width: 98%">
          <el-table-column prop="numbering" label="任务编号" width="200">
          </el-table-column>
          <el-table-column prop="name" label="任务名称" width="180">
          </el-table-column>
          <el-table-column prop="reward" label="任务奖励" width="170">
          </el-table-column>
          <el-table-column prop="level" label="任务级别" width="175">
            <!-- <el-button @click="gosh" type="primary" size="mini" plain>普通</el-button> -->
          </el-table-column>
          <el-table-column prop="time" label="任务时限" width="155">
          </el-table-column>
          <el-table-column prop="date" label="任务截止时间"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="155">
            <template>
              <el-button type="text" size="small"> 查看详情 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- +++++++++++++++++++分页+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++= -->
      <div class="pag1">
        <div class="block">
          <!-- <span class="demonstration">直接前往</span> -->
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    goxq() {
      this.$router.push("/rwxq");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      tableData: [
        {
          numbering: "0123456789",
          name: "任务名称",
          reward: "1,000",
          level: "普通",
          time: "3天",
          date: "2016-05-01",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
      ],
    };
  },
};
</script>


<style lang="scss">
.tableBox2 {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}
.box2 {
  width: 1250px;
  height: 660px;
  background-color: #e9eef3;
  /* padding-top: 50px; */
}

#el-menu {
  background-color: white;
}

.menu1 {
  /* background: white; */
  //   padding-top: 5%;
  margin-left: 2%;
}
.table {
  padding-top: 10px;
  margin-left: 2%;
  // border: 1px red solid;
}
.pag1 {
  /* margin-top: 4%; */
  /* margin-left: 25%; */
  position: absolute;
  top: 380px;
  left: 24.9%;
}
.money {
  width: 1250px;
  height: 200px;
  background-color: white;
  // border: #D8DCE3 solid 1px;
  position: absolute;
  top: 80px;
  border-radius: 4px;
}
.notes1 {
  width: 1250px;
  height: 440px;
  background-color: white;
  // border: red solid 1px;
  position: absolute;
  top: 300px;
  border-radius: 4px;
}
</style>